<!-- 分页组件
     props自定义属性
     pageNO当前页码
     pageSize每页大小
      total记录总数

      emits自定义事件
      pageChange pageNO pageSize改变触发，事件返回{pageNO pageSize}

      使用v-bind绑定对象的所有属性
      -->
<template>
   <div>
      <el-backtop :bottom="100" target=".el-main"  ref="backtop" :visibility-height="5">
      <div>回到顶部</div>
    </el-backtop>
      <el-pagination v-model:current-page="_pageNo" v-model:page-size="_pageSize" :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="props.total"/>
   </div>
</template>
<script setup lang="ts">
import {ref,watch,computed,nextTick} from 'vue'
const backtop=ref()//回到顶部
const props=defineProps({//传过来的对象
   pageNo:{
      type:Number,
      default:1
   },
   pageSize:{
      type:Number,
      default:10
   },
   total:{
      type:Number,
      default:0
   }
})

// 自定义事件
const emit=defineEmits(['emitfather'])
let _pageNo=ref(props.pageNo)//当前页数
let _pageSize=ref(props.pageSize)//显示总页数
/**
 *计算属性总页数
 */
const pages=computed(()=>Math.ceil(props.total/_pageSize.value))//总条数/页面条数
/**
 *监听
 */
watch([_pageNo,_pageSize],()=>{
   if (_pageNo.value<=pages.value) {//当前页数小于总页数将_pageNo与_pageSize传过去
      emit('emitfather',{pageNo:_pageNo.value,pageSize:_pageSize.value})
  nextTick(()=>{
   backtop.value.$el.click?.()//模拟组件点击事件控制dom节点不为空执行右边
  })
   }
  
})
</script>
<style scoped>
.el-backtop{
  font-size: 16px;
  background-color: transparent;
  color: #000;
}
</style>